<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DeepSeek Chat</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        .chat-container {
            width: 1200px;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }
        .chat-history {
            flex: 1;
            padding: 10px;
            overflow-y: auto;
            border-bottom: 1px solid #ddd;
        }
        .chat-input {
            display: flex;
            padding: 10px;
            background-color: #f9f9f9;
        }
        .chat-input input {
            flex: 1;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            margin-right: 10px;
        }
        .chat-input button {
            padding: 10px 20px;
            background-color: #007bff;
            color: #fff;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        .chat-input button:disabled {
            background-color: #ccc;
            cursor: not-allowed;
        }
    </style>
</head>
<body>
    <div class="chat-container">
        <div id="chat-history" class="chat-history"></div>
        <div class="chat-input">
            <input type="text" id="user-input" placeholder="请输入你想咨询的问题...">
            <button id="send-button">发送</button>
            <button id="stop-button">停止</button>
        </div>
    </div>

    <script>
        const chatHistory = document.getElementById("chat-history");
        const userInput = document.getElementById("user-input");
        const sendButton = document.getElementById("send-button");
        const stopButton = document.getElementById("stop-button");

        // 发送消息
        sendButton.addEventListener("click", async () => {
            const message = userInput.value.trim();
            if (!message) return;

            // 显示用户输入
            appendMessage("你", message);
            userInput.value = "";

            // 发送请求到后端
            const response = await fetch("/send", {
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                },
                body: JSON.stringify({ message }),
            });

            const data = await response.json();
            appendMessage("DeepSeek", data.response);
        });

        // 停止聊天
        stopButton.addEventListener("click", async () => {
            const response = await fetch("/stop", {
                method: "POST",
            });

            const data = await response.json();
            appendMessage("System", data.response);
            sendButton.disabled = true;
        });

        // 在聊天记录中显示消息
        function appendMessage(sender, message) {
            const messageElement = document.createElement("div");
            messageElement.innerHTML = `<strong>${sender}:</strong> ${message}`;
            chatHistory.appendChild(messageElement);
            chatHistory.scrollTop = chatHistory.scrollHeight;
        }
    </script>
</body>
</html>